<template>
    <div class="content">
        <div class="login">
            <div class="login-div">
                <div class="logo">
                    <img src="../assets/logo.png" alt="">
                    <span>启帆知识图谱平台</span>
                </div>
                <div class="tabs-box">
                    <div class="tab-item" :class="{ active:activeItem == 0 }" @click="tabClick(0)">
                        <span>管理员端</span>
                    </div>
                    <div class="tab-item" :class="{ active:activeItem == 1 }" @click="tabClick(1)">
                        <span>教师端</span>
                    </div>
                    <div class="tab-item" :class="{ active:activeItem == 2 }" @click="tabClick(2)">
                        <span>学生端</span>
                    </div>
                </div>
                <div class="login-form">
                    <el-form :model="form" label-width="0px">
                        <el-form-item>
                            <el-input v-model="account" class="w-50 m-2 phones" placeholder="请输入账号">
                                <template #prefix>
                                    <el-icon size="20"><User /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="password" class="w-50 m-2 phones" type="password" placeholder="请输入密码">
                                <template #prefix>
                                    <el-icon size="20"><Lock /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item class="btns">
                            <el-button class="loginbtn" type="primary" size="large" @click="loginPass">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import { ref } from 'vue'
    import { User,Lock } from '@element-plus/icons-vue';
    import { ElMessage } from 'element-plus'
    const activeItem =  ref(0);
    const account    =  ref();
    const password   =  ref();
    import api from '@/api/index.js';
    import router from '@/router';

    const tabClick = (value) => {
        activeItem.value = value;
    }

    const loginPass = () => {
        const params = {
            username: account.value,
            password: password.value
        }
        const res = api.login(params);
        res.then((response) => {
            if(response.code == 0){
                let expectedRole = '';
                var role = response.data.role;
                switch(activeItem.value) {
                    case 0:
                        expectedRole = 'admin';
                        break;
                    case 1:
                        expectedRole = 'teacher';
                        break;
                    case 2:
                        expectedRole = 'student';
                        break;
                    default:
                        ElMessage({ type: 'error', message: '登录类型选择异常' });
                        return;
                }
                if( role.roleKey != expectedRole ) {
                    ElMessage({ 
                        type: 'error', 
                        message: `您的账号无权登录${expectedRole === 'admin' ? '管理端' : expectedRole === 'teacher' ? '教师端' : '学生端'}` 
                    });
                    return; 
                }
                localStorage.setItem("token",response.data.token);
                localStorage.setItem("role",JSON.stringify(response.data.role));
                localStorage.setItem("user",JSON.stringify(response.data.user));
                ElMessage({ type: 'success', message: '登录成功', })
                setTimeout(() => {
                    if( role.roleKey == 'admin' ){
                        router.push('/admin')
                    }else if( role.roleKey == 'teacher' ){
                        router.push('/teacher')
                    }else if( role.roleKey == 'student' ){
                        router.push('/student')
                    }
                }, 1000);
            }else{
                ElMessage({ type: 'error', message: '登录失败', })
            }
        }).catch((error) => {
            console.log(error);
        });
    }
</script>
<style scoped>
    .content{ background: url(../assets/login-bg.png) no-repeat; background-size: 100% 100%; display: flex; flex-direction: row; width: 100%; min-height: 100vh;align-items: center;justify-content: end;}
    .login-div{min-width: 550px;min-height: 550px;background: #fff;border-radius: 10px;margin-right: 400px;}
    .login-div .logo{display: flex;flex-direction: row;justify-content: center;gap: 20px;align-items: center;padding-top: 30px;}
    .login-div .logo img{width: 50px;height: 50px;}
    .login-div .logo span{font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 26px;font-weight: 600;}
    .tabs-box{display: flex;flex-direction: row;background: #F0F2F5;width: 80%;margin: 50px auto;}
    .tabs-box .tab-item{min-width: 140px;height: 40px;line-height: 40px;font-family: 微软雅黑, Microsoft YaHei, SimSun;margin-left: 5px;font-size: 16px;font-weight: 400;cursor: pointer;}
    .tabs-box .tab-item.active{background: linear-gradient( 135deg, #2E7CF4 0%, #0457D5 100%);color: #fff;font-size: 18px;font-weight: 600;width: 98%;height: 98%;}
    .tabs-box .tab-item:first-child{margin-left: 0;}
    .login-form{width: 80%;margin: 50px auto;}
    .btns{margin-top: 80px;}
    :deep(.loginbtn){background: linear-gradient( 135deg, #2E7CF4 0%, #0457D5 100%);border: none;width: 100%;}
    :deep( .login-form .el-input__wrapper ) {box-shadow: none;border-bottom: 1px solid #4A4A4A;border-radius: 0;}
    :deep( .login-form .el-input__inner ) {height: 50px;}
    :deep( .login-form .el-button--primary ) {width: 100%;}
    :deep( .el-form-item ) {margin-top: 30px;}
</style>